<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="css/layui.css" media="all">
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>
	<body>
		<!-- 顶部导航栏 -->
		<header class="header" id="header"></header>

		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title">
				<li class="layui-this">购物车</li>
			</ul>
		</div>
			<div class="layui-tab-content" style="height: 100px;">
				<!-- 购物车 -->
				<div class="layui-tab-item layui-show" style="height: 100%; width: 1100px; margin: 10px auto;">
					<table class="layui-table" lay-skin="line" id="show">
						<colgroup>
							<col width="150">
							<col width="200">
							<col>
						</colgroup>
						<thead>
							<tr>
								<th colspan="7" >房间列表</th>	
							</tr>
						</thead>
						<thead>
							<tr>
								<th>房间图片</th>
								<th>房间类型</th>
								<th>房间价格</th>
								<th>预定数量</th>
								<th>预定时段</th>
								<th>预定天数</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="show2">
						<!-- <tbody>
							<tr  style="height: 100px;">
								<th><input type="checkbox" name="oid"></th>
								<td><img src="img/111.jpg"></td>
								<td>大床房</td>
								<td>￥180</td>
								<td>1</td>
								<td>2018-11-10 14:00 ~ 2018-11-11 14:00</td>
								<td>￥540</td>
								<td><button type="button" class="layui-btn layui-btn-danger layui-btn-sm">删除</button></td>
							</tr>
							<tr  style="height: 100px;">
								<td colspan="4" style="font-size: 20px;text-align: center;">总计：￥3333</td>
								<td colspan="4" style="text-align: center;">
									<a href="http://www.layui.com" 	class="layui-btn layui-btn-lg">结&nbsp;&nbsp;&nbsp;算</a>
									<a href="http://www.layui.com" 	class="layui-btn layui-btn-lg layui-btn layui-btn-warm">清&nbsp;&nbsp;&nbsp;空</a>
								</td>
							</tr>
						</tbody> -->
						</tbody>
					</table>
				</div>
			</div>




		<script src="layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script src="js/jquery.min.js" charset="utf-8"></script>
		<script>
			$(function(){
				hed();
				jz();
			   });
			function hed(){
			      $.ajax({
			         type:"get",
			         url:"/header.html",
			         async:true,
			         success:function(data){
			            $("#header").html(data);
			         }
			      });
			   }
			function jz(){
				$.ajax({
					url:"/cart/showMyCart",
					type:"post",
					dataType:"json",
					success:function(data){
						var content="";
						var content2="";
						var sum=0;
						for (var i = 0; i < data.length; i++) {
							sum+=data[i].price*data[i].number*data[i].days;
							content+='<tr  style="height: 100px;">'
								+'<td><img src="img/'+data[i].img+'"></td>'
								+'<td>'+data[i].type+'</td>'
								+'<td>￥'+data[i].price+'</td>'
								+'<td>'
								+'<button type="button" class="layui-btn layui-btn-primary layui-btn-xs"onclick="sub('+data[i].id+')" id="sub"><i class="layui-icon"></i></button>'
								+'<span style="font-size: 15px;">&nbsp;'+data[i].number+'&nbsp;</span>'
								+'<button type="button" class="layui-btn layui-btn-primary layui-btn-xs"onclick="add('+data[i].id+')" id="add"><i class="layui-icon"></i></button>'
								+'</td>'
								+'<td>'+data[i].startdate+' 12:00 ~ '+data[i].enddate+' 12:00</td>'
								+'<td>'+data[i].days+'</td>'
								+'<td><button type="button" class="layui-btn layui-btn-danger layui-btn-sm" onclick="del('+data[i].id+')">删除</button></td>'
								+'</tr>'
								}
							content+=+'<tr  style="height: 100px;">'
							+'<td colspan="3" style="font-size: 20px;text-align: center;">总计：￥'+sum+'</td>'
							+'<td colspan="4" style="text-align: center;">'
							+'<a href="http://localhost:8080/payordertt.html" class="layui-btn layui-btn-lg layui-btn ">结&nbsp;&nbsp;&nbsp;算</a>'
							+'<button type="button" class="layui-btn layui-btn-lg layui-btn layui-btn-warm" onclick="clean()">清&nbsp;&nbsp;&nbsp;空</button>'
							+'</td>'
							+'</tr>'
								$("#show2").html(content);
								//$("#sum").html("￥"+sum);
							}
						});
				
			   }
			
			function del(id){
				$.ajax({
					url:"/cart/deletCertGood",
					type:"post",
					data:{
						id:id
					},
					success:function(data){
						alert(data);
						jz();
					}
				});
			}
			
			function add(id){
				$.ajax({
					url:"/cart/addCertGood",
					type:"post",
					data:{
						id:id
					},
					success:function(data){
						jz();
					}
				});
			}
			function sub(id){
				$.ajax({
					url:"/cart/subCertGood",
					type:"post",
					data:{
						id:id
					},
					success:function(data){
						jz();
					}
				});
			}
			function clean(){
				$.ajax({
					url:"/cart/cleanCertGood",
					type:"post",
					success:function(data){
						jz();
					}
				});
			}
			
			</script>
		<script>
			//页码
			layui.use(['laypage', 'layer'], function(){
			var laypage = layui.laypage
			,layer = layui.layer;
			laypage.render({
				elem: 'demo1'
				,count: 70 //数据总数
				,jump: function(obj){
				console.log(obj)
				}
			});
			laypage.render({
				elem: 'demo2'
				,count: 70 //数据总数
				,jump: function(obj){
				console.log(obj)
				}
			});
			});
			//全选
			document.getElementById("check").onclick = function() {
				var checked = document.getElementById("check").checked;
				var checkson = document.getElementsByName("oid");
				if (checked) {
					for (var i = 0; i < checkson.length; i++) {
						checkson[i].checked = true;
					}
				} else {
					for (var i = 0; i < checkson.length; i++) {
						checkson[i].checked = false;
					}
				}
			}

			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			});


			layui.use('form', function() {
				var form = layui.form;

				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});
		</script>

	</body>
</html>